<template>
    <span class="zbtn" :style="{background:bgColor}" @click="clickActive" ref="zbtn">
        {{content}}
    </span>
</template>

<style scoped>
    .zbtn {
        background-color: #9a9da2;
        height: 3rem;
        line-height: 3rem;
        padding: .2rem .5rem;
        font-size:14px;
        text-align: center;
        color: #fff;
        font-weight: 700;
    }
    .zbtn:hover {
        background-color: #b3b6bb!important;
        color: #fff;
    }
</style>
<script>
export default {
    props:['content','bgColor','clickStyle'],
    methods:{
        clickActive(){
            this.$refs.zbtn.style.background=this.clickStyle;
        }
    }
}
</script>